<template>
    <div>
        <el-container style="height: 600px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1', '2', '3']" @select="handleSelect">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>客户管理</template>
                        <el-menu-item index="11">客户管理</el-menu-item>
<!--                        <router-link id="fee" to="/demend/fee">{{fee}}tuif</router-link>-->
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>房间管理</template>
                        <el-menu-item index="21">预定客房</el-menu-item>
                        <el-menu-item index="22">入住管理</el-menu-item>
                        <el-menu-item index="23">客房管理</el-menu-item>
                        <el-menu-item index="24">退房管理</el-menu-item>
                        <!--<el-menu-item index="2-4"><router-link to ="/fee">退房管理</router-link></el-menu-item>-->
                        <el-menu-item index="25">住房记录</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>员工管理</template>
                        <el-menu-item index="31">员工管理</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
        </el-container>

        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "Home.vue",
        data(){
            return {
                breadcrumbItems: ['入住管理'],
            }
        },
        methods:{
            handleSelect(key, keyPath){
                switch(key){
                    case '24':
                        this.$router.push('/fee');
                        this.breadcrumbItems  = ['退房管理']
                        break;
                    case '11':
                        this.$router.push('/customer')
                        this.breadcrumbItems  = ['客户管理']
                        break;
                    case '21':
                        this.$router.push('/enter')
                        this.breadcrumbItems  = ['预定客房']
                        break;
                    case '22':
                        this.$router.push('/check')
                        this.breadcrumbItems  = ['入住管理']
                        break;
                    case '23':
                        this.$router.push('/house')
                        this.breadcrumbItems  = ['客房管理']
                        break;
                    case '25':
                        this.$router.push('/record')
                        this.breadcrumbItems  = ['住房记录']
                        break;
                    case '31':
                        this.$router.push('/user')
                        this.breadcrumbItems  = ['员工管理']
                        break;
                }
            },
        }
    }
</script>

<style >
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 80px;
    }
    .el-aside {
        color: #333;
    }
</style>

